<template>
  <div class="w-100 h-100 d-flex">
      <div style="width: 60%; height: 100% ">

      <div class=" w-100 h-100">
        <div id="tz_pie"  class="w-100"
   style="height: 100%; position: relative" >
           
        </div>
      </div>
    
  </div>
  <div style="width: 40%; height: 100%; padding: 100px 0 40px 0">
    <div style="height: 50px; width: 100%; display: flex">
      <img
        style="
          width: 30px;
          height: 30px;
          margin-top: 10px;
        "
        src="../../../../assets/image/underGround/little_bk1.png"
      >
      <div
        style="
          width: 120px;
          margin-left: 20px;
          line-height: 50px;
          font-size: 20px;
        "
      >
        {{ props.rightData[0].label }}
      </div>
      <div
        style="
          margin-left: 20px;
          color: rgba(0, 194, 255, 1);
          font-size: 26px;
          line-height: 50px;
        "
      >
        {{ props.rightData[0].value }}
      </div>
    </div>
    <div style="height: 50px; width: 100%; display: flex; margin-top: 30px">
      <img
        style="
          width: 30px;
          height: 30px;
          margin-top: 10px;
        "
        src="../../../../assets/image/underGround/little_bk2.png"
      >
      <div
        style="
          width: 120px;
          margin-left: 20px;
          line-height: 50px;
          font-size: 20px;
        "
      >
      {{ props.rightData[1].label }}


      </div>
      <div
        style="
          margin-left: 20px;
          color: rgba(184, 235, 143, 1);
          font-size: 26px;
          line-height: 50px;
        "
      >
      {{ props.rightData[1].value }}

      </div>
    </div>
  </div>
  </div>
 
</template>
  
<script setup lang='ts'>
import * as echarts from "echarts";
import { fa } from "element-plus/es/locale";

  const props = defineProps({

rightData: {
  type: Array<any>,
  default: () => [],
},
});
let option = {
  legend: { show: false },
  grid: {
  left: '0%',
  right: '0%',
  bottom: '0%',
  containLabel: true
},
  series: [
      {
          name: '入住科室分布',
          type: 'pie',
          radius: ['0%', '60%'],
          avoidLabelOverlap: true,
          itemStyle: { borderColor: '#fff', borderWidth: 2 },
          color: [
              '#00C2FF',
              '#B8EB8F',
          ],
          label: {
              show:false

          },
          data: [
              { value: props.rightData[0].value, name:  props.rightData[0].value.label, percent: props.rightData[0].value+ '%'},
              { value: props.rightData[1].value, name:  props.rightData[1].value.label, percent: props.rightData[1].value+ '%'},

          ],
      },
  ],
};
let myChart:any
onMounted(()=>{

myChart = echarts.init(
document.getElementById('tz_pie') as HTMLElement
);
myChart.setOption(option)
})
onBeforeUnmount(() => {
// 销毁 ECharts 实例
if (myChart) {
 myChart.dispose();
}
});
</script>
  
<style>
  
</style>